<template>
  <section>
     <!-- 面包屑 -->
 <breadcrumbs></breadcrumbs>
    <!-- 查询条件 -->
    <el-form ref="searchForm"
             :model="searchForm"
             label-width="100px"
             inline
             class="demo-form-inline"
             size='small'
             style="border-bottom: 1px solid #f6f6f6;">
      <el-form-item label="接口名称"
                    prop="name">
        <el-input v-model="searchForm.name"
                  placeholder="请输入接口名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="search">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <btns @exec="exec"></btns>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">接口列表</div>
      </div>
      <el-table :data="tableData"
                style="width: 100%"
                row-key="ifId"
                border
                lazy
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="ifName"
                         label="名称"
                         width="200">
        </el-table-column>
        <el-table-column prop="ifDs"
                         label="描述"
                         width="200">
        </el-table-column>
        <el-table-column prop="ifUrl"
                         label="路径">
        </el-table-column>
        <el-table-column prop="ifMethod"
                         label="method">
        </el-table-column>
        <el-table-column prop="ifQpt"
                         label="body">
        </el-table-column>
        <el-table-column prop="ifStatus"
                         label="方法"
                         :formatter="fun">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="120">
          <template slot-scope="scope">
            <a v-if="scope.row.ifPid==0"
               ref="createInvoteBtn"
               :download="scope.row.ifDs+'.js'"
               :href="createCon(scope.row.children,scope.row)">导出API.js文件</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </section>
</template>

<script>

import { format } from '../../utils/tool'
import btns from '@/components/btns.vue'
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  components: {
    btns,
    breadcrumbs,
  },
  data () {
    return {
      searchForm: {
        name: ''
      },
      data: [],
      all: [],
      tableData: []
    }
  },
  created () {
    this.iflist();
  },
  methods: {
    createCon (children, v) {
      if (!children || children && children.length == 0) {
        return 'javascript:void(0)'
      }
      var cons = [];
      var time = format.Date(new Date().getTime())
      cons.push("/**\n\
                        * Created by xnr on "+ time + ".\n\
                    */\n")
      cons.push("import request from '../utils/fetch'\n")
      children.forEach(c => {
        if (c.ifUrl) {
          cons.push("//" + c.ifDs + "\n");
          var fun = this.getfun(c.ifUrl)
          var con = "export function " + fun + "(data) {\n\
                            return request({\n\
                            url: '"+ c.ifUrl + "',\n\
                            method: '"+ c.ifMethod + "',\n\
                            requestBody:'"+ c.ifQpt + "',\n\
                            loading: true,\n\
                            "+ (c.ifMethod == 'get' ? 'params: data' : 'data:data') + "\n\
                            })\n\
                        }\n";
          cons.push(con);
        }
      });
      var mimeType = 'text/plain';
      return 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(cons.join(''))

    },
    getfun (url) {
      var r = url.split('/');
      var rr = [];
      for (var i = r.length; 2 <= i; i--) {
        rr.unshift(r[i]);
      }
      return rr.join('');
    },
    handleReset () {
      this.$refs.searchForm.resetFields();
      this.search()
    },
    search () {
      if (this.searchForm.name) {
        var data = this.data.filter(e => e.ifName.indexOf(this.searchForm.name) >= 0 && e.ifPid != 0 || e.ifPid == 0);
        this.getdata(data);
      } else {
        var data = this.data
        this.getdata(data);
      }
    },
    exec () {

    },
    iflist () {
      //获取接口
      this.$api.system.iflist({}).then(d => {
        if (d.code == 200) {
          this.data = d.data;
          this.all = this.getdata(this.data);
        } else {
          this.$message.error(d.msg);
        }
      }).catch((e) => {
        console.log(e);
      })
    },
    getdata (nowdata) {
      var data = nowdata.filter(e => e.ifPid == 0);
      var temp = [];
      data.forEach(e => {
        e.ifDs = e.ifDs ? e.ifDs.replace(/ /g, '').replace('Controller', '').toLowerCase() : e.ifDs;

        e.children = nowdata.filter(c => c.ifPid == e.ifId);
        if (e.children && e.children.length > 0) {
          temp.push(e)
        }
      })
      this.tableData = temp;
      return temp;
    },
    fun (r, c) {
      if (r.ifPid == 0) {
        return ''
      }
      var controller = this.tableData.find(e => e.ifId == r.ifPid);
      return r.ifUrl ? "this.$api." + controller.ifDs + "." + this.getfun(r.ifUrl) : ''
    }
  }
}

</script>